<template>
  <div class="monitorLiving">
    <div class="map-map">
		<!-- 子组件中，已经定义了：prop为fu_msg，所以这里fu_msg绑定了父组件的相应属性，就实现了，父组件向子组件通信 -->
      <MonitorMap
        :fu_msg="data_map_information"
		<!-- ctrl_vis_VideoDialog为父组件的方法 -->
        @func_marker_video="ctrl_vis_VideoDialog"
        @func_marker_person="ctrl_vis_PersonDialog"
      ></MonitorMap>
      <SideBar
        :vis_PersonDialog="vis_PersonDialog"
        @func="getMsgSideBar"
        :projectList="projectList"
        @func_projectId="transmit_map_information"
      ></SideBar>
      <MonVidDialog
        v-if="vis_VideoDialog"
        @func="ctrl_vis_VideoDialog"
      ></MonVidDialog>
      <MonPicDialog
        v-if="vis_PictureDialog"
        @func="ctrl_vis_PictureDialog"
        @func_pictureList="ctrl_pictureList"
        @func_projectDeviceList="ctrl_projectDeviceList"
        :projectDeviceList="projectDeviceList"
        :pictureList="pictureList"
      ></MonPicDialog>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/style/IntelligentMonitoring/FieldMonitoring.scss";
</style>

<script>
import { queryParentOrSub } from "@/service/project/project";
import {
  // findPictureByDeviceId,
  // findProjectCondition,
  getSubProjectDetail,
  findDeviceMaker,
  findPatrolDeviceMaker,
  getCameraNum,
  getAnQuanMaoNum
} from "@/service/monitor/index";

// import MonitorVideoWindows from "@/views/monitor/MonitorVideoWindows.vue";

export default {
  data() {
    return {
      //视屏窗口
      videoWindows: [],
      num: 5,
      show: "",
      sideBar: "this is msg",
      // 控制子组件显示与隐藏的标识，类型为Boolean
      vis_PictureDialog: false,
      searchKey: "",
      projectList: "",
      projectDeviceList: "",
      pictureList: "",
      //MonitorMap
      deviceId: "",
      vis_PersonDialog: false,
      vis_VideoDialog: false,
      data_map_information: {
        polygonPath: [],
        //百度地图
        center: {
          lng: 116.404, //经度
          lat: 39.915 //纬度
        },
        zoom: 12,
        position: {
          lng: 116.404, //经度
          lat: 39.915 //纬度
        },
        points: {
          cameraPoints: [],
          patrolPoints: []
        }
      }
    };
  },
  components: {
    MonitorMap: () => import("./MonitorMap.vue"),
    SideBar: () => import("./SideBar.vue")
    // MonVidDialog: () => import("./MonVidDialog.vue"),
    // MonPicDialog: () => import("./MonPicDialog.vue")
  },

  methods: {
    ctrlVideoDialog() {
      this.vis_VideoDialog = !this.vis_VideoDialog;
    },

    //MonPicDialog
    ctrl_vis_PictureDialog(data) {
      this.vis_PictureDialog = data.vis_PictureDialog;
    },
    ctrl_pictureList(data) {
      this.pictureList = data.pictureList;
    },
    ctrl_projectDeviceList(data) {
      this.projectDeviceList = data.projectDeviceList;
    },

    //sideBar
    transmit_map_information(data) {
      this.vis_VideoDialog = false;
      if (data.projectId) {
        //摄像头数量 camera ==> 数据没绑定到相应参数
        getCameraNum({ projectId: data.projectId });
        //安全帽数量  ==> 数据没绑定到相应参数
        getAnQuanMaoNum({ projectId: data.projectId });
        //子项目详情 ；
        getSubProjectDetail({ subProjectId: data.projectId }).then(result => {
          let redLine = result.data.obj.readLine;
          if (redLine != null && redLine.length > 0) {
            this.data_map_information.polygonPath = redLine;
            this.data_map_information.center = result.data.obj.readLine[0];
            this.data_map_information.zoom = 13;
          } else {
            this.data_map_information.polygonPath = [];
            this.data_map_information.zoom = 14;
            this.$notification["warning"]({
              message: "警告，此项目无红线区域"
            });
            // this.$message.error("警告，此项目无红线区域");
          }
        });
        //是否勾选 摄像头
        if (data.vis_camera) {
          findDeviceMaker({ subProjectId: data.projectId }).then(result => {
            this.data_map_information.points.cameraPoints = result.data.obj;
          });
        } else {
          this.data_map_information.points.cameraPoints = [];
        }
        //是否勾选 安全帽
        if (data.vis_patrol) {
          findPatrolDeviceMaker({ subProjectId: data.projectId }).then(
            result => {
              this.data_map_information.points.patrolPoints = result.data.obj;
            }
          );
        } else {
          this.data_map_information.points.patrolPoints = [];
        }
      }
    },
    getMsgSideBar(data) {
      this.vis_VideoDialog = data.vis_VideoDialog;
      this.vis_PictureDialog = data.vis_PictureDialog;
      // this.projectList = data.projectList;

      // alert(this.vis_VideoDialog);
      // alert(JSON.stringify(this.sideBar));
    },

    //monitorMap
    ctrl_vis_PersonDialog(data) {
      this.vis_PersonDialog = data.vis_PersonDialog;
      this.deviceId = data.deviceId;
    },
    ctrl_vis_VideoDialog(data) {
      window.console.info(data.deviceId);
      this.vis_VideoDialog = data.vis_VideoDialog;
    }
  },
  created: function() {
    const that = this;
    queryParentOrSub({ searchKey: this.searchKey }).then(result => {
      window.sessionStorage.setItem("proNumber", result.data.obj.length);
      let data = result.data.obj;
      that.projectList = data;
    });
    // findProjectCondition().then(result => {
    //   that.projectDeviceList = result.data.obj;
    // });
    // findPictureByDeviceId({
    //   deviceId: "",
    //   time: []
    // }).then(result => {
    //   if (result.data.obj) {
    //     this.pictureList = result.data.obj;
    //   }
    // });
    // this.$message.warning("测试数据, 父项目 -- 白云山 , 子项目 -- 白云山1111");
  },
  mounted() {}
};
</script>
<style>
.BMap_cpyCtrl {
  display: none !important;
}
.anchorBL {
  display: none !important;
}
</style>
